<template>
	<div class="cloneContainer">
		<div class="header">
			<a-input v-model:value="searchData['search_AND_LIKE_title']" autocomplete="off" :placeholder="t('control', '请输入标题')" style="width:200px;margin-right: 12px" />
			<div style='margin-right:15px'>
				{{ t('control', '发布时间') }}
				<minRangePicker
					style="margin-left: 5px;"
					picker="datetime"
					v-model:startTime="searchData.releaseTime0" v-model:endTime="searchData.releaseTime1" />
			</div>
			<div>
				{{ t('control', '截止时间') }}
				
				<minRangePicker
					style="margin-left: 5px;"
					picker="datetime"
					v-model:startTime="searchData.expiredTime0" v-model:endTime="searchData.expiredTime1" />
			</div> 
			<div>
				<a-button type="primary" @click="(pagination.current=1,tableData=[],show())">{{t('control', '查询')}}</a-button>
				<a-button style="margin-left: 10px" @click="(pagination.current=1,searchData = {},show())">{{t('control', '重置')}}</a-button>
			</div>
		</div>
		<div class="content">
			<div style="flex:1;min-height: 0;overflow: auto;">
				<a-table
					:key="activeName"
					:dataSource="tableData" :columns="columns" :pagination="false">
					<template #bodyCell="{ column, text, record, index }">
						<template v-if="column.dataIndex === 'status'">
							<span>
								{{ text === 0 ? t('control', '未发布') : text === 1 ? t('control', '已发布') : text === 2 ? t('control', '待评分') : t('control', '已评分') }}
							</span>
						</template>
						<template v-if="column.dataIndex === 'projectName'">
							<a-tooltip placement="topLeft">
								<template #title>
									<span>{{ text }}</span>
								</template>
								<span style="display: inline-block; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
									{{ text }}
								</span>
							</a-tooltip>
						</template>
						<template v-if="column.key === 'operate'">
							<a style="margin-left: 12px" @click="handleClick({ name: '查看', record, index })">{{ t('common', '查看') }}</a>
						</template>
					</template>
				</a-table>
			</div>
			<a-pagination style="text-align: center" @change="show" v-model:current="pagination.current" show-size-changer  v-model:pageSize="pagination.size"
				:total="pagination.totalElements" />
		</div>
		<a-drawer
			title=""
			width="60%"
			placement="right"
			:closable="false"
			v-model:open="drawer.visible"
		>
			<taskDetail v-model:currentData="taskDetailData" />
		</a-drawer>
	</div>
</template>
<script setup>
import { reactive, ref, watch, inject } from 'vue'
import { useRoute } from 'vue-router'
import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue'
import minDatePicker from '@/components/common/minDatePicker.vue'
import { learningTaskPage, learningTaskFindById } from '@/request/stu/task'
import { message, Modal } from 'ant-design-vue'
import minRangePicker from '@/components/common/minRangePicker.vue'
import taskDetail from '@/components/stu/taskDetail.vue'
import { t } from '@/i18n'
const drawer = reactive({ visible: false, data: {} })
const searchData = ref({})
const pagination = ref({ totalElements: 0, current: 1, size: 10 })
const formModel = ref({})
const formRef = ref()
const modal = reactive({ visible: false, formDisable: false, name: '' })
const route = useRoute()

const infoModalRef = ref()
const infoModal = reactive({
	visible: false,
	formRef: null,
	model: {},
	rules: {
		name: [
			{ required: true, message: '请输入', trigger: 'change', },
		],
	},
})
const columns = [
	{ title: t('table', '标题'), dataIndex: 'title', key: 'title' },
	{ title: t('table', '状态'), dataIndex: 'status', key: 'status' },
	{ title: t('table', '系统评分'), dataIndex: 'score', key: 'score' }, 
	{ title: t('table', '发布时间'), dataIndex: 'releaseTime', key: 'releaseTime'},
	{ title: t('table', '截止日期'), dataIndex: 'expiredTime', key: 'expiredTime'},
	{ title: t('table', '任务列表'), dataIndex: 'operate', key: 'operate' },
]
// const columns = ref([...originColumns])
const tableData = ref([])
const activeName = ref('已加入')
const conutGroup = ref({})

let pojectInfo = JSON.parse(sessionStorage.getItem('pojectInfo') || '{}')
const taskDetailData = ref({})

const show = async () => {
	console.log(searchData.value)
	let req = {
		...pagination.value,
		page: pagination.value.current - 1,
		...searchData.value,
		search_AND_EQ_learningId: route.query.learningId,
		'search_AND_EQ_learningStudent.studentId': route.query.studentId,
		search_AND_BETWEEN_releaseTime: searchData.value?.releaseTime0 && `${searchData.value?.releaseTime0}~${searchData.value?.releaseTime1}`,
		search_AND_BETWEEN_expiredTime: searchData.value?.expiredTime0 && `${searchData.value?.expiredTime0}~${searchData.value?.expiredTime1}`,
	}
	let res = {
		列表: await learningTaskPage(req),
  }
	if (res['列表']) {
		tableData.value = res['列表'].data.content
		pagination.value = {
			...pagination.value,
			...res['列表'].data.page
		}
	}
}
(async () => {
	show()
})()

const classStructure = ref([])
const handleChange = async (val) => {
	console.log(val)
	let res = await teacherGradeClassFindAll({'search_AND_EQ_grade.year': val})
	console.log(res, '?')
	if (!res) return classStructure.value = []
	classStructure.value = res.data
}
const selectedRowKeys = ref([])
const onSelectChange = keys => selectedRowKeys.value = keys


const getStudentProjectInfo = async ({name, num}) => {
	let sRes = await studentCheck({name, num})
	if(!sRes) return
	let otherRes = await studentSignedProject({studentId: sRes?.data || ''})
	return otherRes?.data
}
const handleClick = async ({ name, record }) => {
	let req = {
		...record
	}, res = null, operate = null, info = null
	switch (name) {
		case '查看':
			res = await learningTaskFindById(record.id)
			if (!res) return
			taskDetailData.value = res.data
			drawer.visible = true
			break
	}
}



</script>

<style lang="scss" scoped>
$mainColor: #a84e91;

.cloneContainer {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: white;
		/* border-radius: 10px; */
		height: 80px;
		padding: 20px;
		.item {
			cursor: pointer;
			margin-right: 15px;
			padding: 5px 10px;
			border: 1px solid transparent;
		}
		.activeItem {
			border-radius: 10px;
			/* border: 1px solid $mainColor; */
			box-shadow: $generalBoxShadow;
		}
	}

	.content {
		margin-top: 20px;
		padding: 20px;
		overflow: auto;
		flex: 1;
		display: flex;
		flex-direction: column;
		background: white;
		border-radius: 10px;
		
	}
}


.required {
    position: relative;
    /* padding-left: 30rpx; */
}
.required::before {
    content: '*';
    font-size: 16px;
    color: red;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
    margin: auto;
    display: flex;
    align-items: center;
}

</style>